<template>
  <div id="jsmb">
    <div class="tit">
      <h2>建设目标</h2>
      <div class="empty-box"></div>
      <p>一诺万金数字乡村平台旨在为政府解决监管难、群众解决办事难，建设安居乐业的美丽数字乡村</p>
    </div>
    <div class="con">
      <div class="img-box">
        <img src="https://www.1nuoyun.com/uploadfile/2021/09/24/202109241911218mNP3C.png" alt="">
      </div>
      <div class="text-box">
        <div class="item" v-for="item in message" :key="item.mainTit">
          <h2>{{ item.mainTit }}</h2>
          <p>{{ item.content }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Jsmb",
    data() {
      return {
        message: [
          {
            mainTit: "汇数据",
            content: "完善乡村大数据资源汇集，构建乡村基础人口、组织、企业数据库，物联网设备，实现村务工作线上化"
          },
          {
            mainTit: "勤政务",
            content: "打通各部门信息孤岛、促进信息流转，推动部门间资源共享和业务协同，通过对接县域政务平台，实现数据在线，政务留痕，实现政务公示等硬性纲领"
          },
          {
            mainTit: "惠民生",
            content: "改善人居环境，全面掌握乡村治理情况，辅助决策指导，建立乡村生活服务体系，深化信息惠民，激发民生动力，发展乡村文旅、乡风文明、创意民宿"
          },
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>

  @import "assets/scss/public";

  #jsmb {
    width: 62.5%;
    margin: 4rem auto;
    .tit {
      .empty-box {
        background: linear-gradient(90deg, #29684e, #1b7729);
      }
    }
    .con {
      padding: 4rem;
      box-shadow: 0 0 1rem #f5f5f5;
      text-align: center;
      .img-box {
        margin-bottom: 3.2rem;
        img {
          width: 80%;
        }
      }
      .text-box {
        display: flex;
        justify-content: space-between;
        .item {
          flex: 1;
          padding: 0 4rem;
          h2 {
            font-size: 2rem;
            font-weight: 1000;
            color: #29684e;
            margin-bottom: 1.6rem;
          }
          p {
            font-size: 1.6rem;
            color: #666;
            text-align: justify;
          }
        }
      }
    }
    .con:hover {
      transition-duration: 0.3s;
      transform: translateY(-0.5rem);
    }
  }
</style>